<template>
    <div class="right-content">
        <div class="todocontent">
            <!-- 左边搜索区  start -->
            <div class="left">
                <div class="left-top">
                    <!-- <el-input
                        v-model="search_todo"
                        placeholder="搜索待办"
                    ></el-input> -->
                    <span style="width: 13vw"></span>
                    <el-button
                        type="primary"
                        icon="el-icon-plus"
                        style=""
                        @click="showaddTodo"
                    ></el-button>
                </div>
                <el-calendar v-model="value" :first-day-of-week="7" id="calendar">
                    <template slot="dateCell" slot-scope="{ data }">
                        <div :class="getcurrent(data.day)" @click="dateTitle = data.day">
                            <p>
                                {{ data.day.split('-').slice(2).join('-') }}
                            </p>
                        </div>
                    </template>
                </el-calendar>
                <div class="left-bottom">
                    <el-button @click="getMytodo()">我的待办</el-button>
                    <el-button @click="getMyCreate()">我发起的</el-button>
                    <el-button @click="getmyparticipants()">我参与的</el-button>
                    <el-button @click="getMyhandle()">已处理的</el-button>
                    <el-button @click="getMyrecycle()">回收站</el-button>
                </div>
            </div>
            <!-- 左边搜索区  end -->
            <!-- 右边展示区  start -->
            <div class="right">
                <div class="right-top">
                    <p id="title">{{dateTitle}}</p>
                    <!-- <el-button type="primary" @click="delMany(todoPage)" :disabled="delmany">批量删除</el-button> -->
                </div>
                <div class="right-bottom">
                    <!-- 卡片  start -->
                    <el-card
                    shadow="hover"
                    v-for="(item) in todoList"
                    :key="item.id"
                    @click.native="showaddTodo(item, todoPage)"
                    class="card"
                    body-style="width: 100%; padding: 0px; display: flex; flex-wrap: nowrap"
                    >
                    <div class="cardDivleft">
                        <!-- <div class="checkbox" @click.stop="">
                          <el-checkbox v-model="item.delstatus" @change="delList(item)"></el-checkbox>
                        </div> -->
                        <div class="text">
                            <span class="cardTitle">{{item.title}}</span>
                            <br>
                            <span id="remark" :title="getArray(item.participants)">参与人:{{getArray(item.participants)}}</span>
                            <br>
                            <span id="remark" :title="item.content">备注:{{item.content}}</span>
                        </div>
                    </div>
                    <div class="cardDivright">
                        <div class="cardDivright-text">
                            <span :class="EndTime(item) ? 'endfontnormal' : 'endfontred'">截至时间</span>
                            <p></p>
                            <span :class="EndTime(item) ? 'endtimenormal' : 'endtimered'">{{item.end}}</span>
                        </div>
                        <div class="cardDivbtn">
                        <el-link icon="el-icon-check" type="primary" @click.stop="completeTodo(item, todoPage)" v-if="todoPage !== 5"></el-link>
                        <el-link icon="el-icon-delete" type="danger" @click.stop="deleteTodo(item, todoPage)" v-if="todoPage !== 5"></el-link>
                        <el-link icon="el-icon-delete" type="danger" @click.stop="delrecycle(item.id)" v-if="todoPage === 5"></el-link>
                        <!-- <el-button type="primary" size="small" icon="el-icon-check" @click.stop="completeTodo(item, todoPage)" v-if="todoPage !== 5"></el-button>
                        <el-button type="danger" size="small" icon="el-icon-delete" @click.stop="deleteTodo(item, todoPage)" v-if="todoPage !== 5"></el-button>
                        <el-button type="danger" size="small" icon="el-icon-delete" @click.stop="delrecycle(item.id)" v-if="todoPage === 5"></el-button> -->
                    </div>
                    </div>
                    </el-card>
                    <!-- 卡片 end -->
                </div>
            </div>
            <!-- 右边展示区  end -->
            <!-- 弹框 start -->
            <add-todo v-if="AddTodoVisible" ref="AddTodo" :getparenttodo="getMytodo"></add-todo>
            <!-- 弹框 end -->
        </div>
    </div>
</template>

<script>
import TodoList from '../../utils/TodoList'
export default {
  name: 'Todo',
  data() {
    return {
      value: new Date(),
      dateTitle: '', // 日期title
      search_todo: '', // 搜索框
      todoList: [], // 需要渲染的待办事项列表
      checkbox: false, // 多选框
      AddTodoVisible: false, // 添加待办弹框
      delmany: true, // 待办事项是否收入回收站
      dellist: [], // 批量删除列表
      recycleList: [], // 回收站列表
      MyTodoList: [], // 我发起的
      MyParticipateList: [], // 我参与的
      DoneList: [], // 已完成的
      deleteList: [], // 回收站
      todoPage: '' // 当前所在待办页
    }
  },
  components: {
    AddTodo: resolve => require(['./add-todo'], resolve)
  },
  mounted() {
    this.editBtn()
    this.getcurrent()
    this.getMytodo()
    this.showCurrent()
  },
  methods: {
    // 修改calendar自带的按钮样式
    editBtn() {
      var span1 = document.querySelectorAll('.el-button-group>.el-button:first-child span')
      span1.forEach(item => {
        item.innerText = '<'
      })
      var span2 = document.querySelectorAll('.el-button-group>.el-button:not(:first-child):not(:last-child) span')
      span2.forEach(item => {
        item.innerText = '今天'
      })
      var span3 = document.querySelectorAll('.el-button-group>.el-button:last-child span')
      span3.forEach(item => {
        item.innerText = '>'
      })
      this.todoList = TodoList.todoList
    },
    getcurrent(data) {
      var month1 = (data || '').split('-').slice(1, 2)
      var currentDate = (new Date().toLocaleDateString() || '').split('/').join('-')
      var month2 = currentDate.split('-').slice(1, 2)
      if (month1 < month2 || month1 > month2) {
        return 'Gray'
      } else {
        return ''
      }
    },
    // title显示当前日期
    showCurrent() {
      var date = (new Date().toLocaleDateString() || '').split('/').join('-')
      this.dateTitle = date
      // return date
    },
    // 截止时间判断
    EndTime(item) {
      var current = this.ConverseTime()
      if (item.completeStatus === true) return true
      else return item.end >= current
    },
    // 获取当前时间，并转换格式为 yyyy-mm-dd hh:MM:SS
    ConverseTime() {
      var newdate = new Date()
      //  console.log(typeof (newdate))
      var y = newdate.getFullYear()
      var m = newdate.getMonth() + 1
      m = m < 10 ? ('0' + m) : m
      var d = newdate.getDate()
      d = d < 10 ? ('0' + d) : d
      var h = newdate.getHours()
      h = h < 10 ? ('0' + h) : h
      var M = newdate.getMinutes()
      M = M < 10 ? ('0' + M) : M
      return (y + '-' + m + '-' + d + ' ' + h + ':' + M)
    },
    // 显示新增弹框
    showaddTodo(item, page) {
      this.AddTodoVisible = true
      // this.$refs.AddTodo.init(item)
      this.$nextTick(() => {
        this.$refs.AddTodo.init(item)
      })
      if (page === 1) this.getMytodo()
      else if (page === 2) this.getMyCreate()
      else if (page === 3) this.getmyparticipants()
      else if (page === 4) this.getMyhandle()
      else this.getMyrecycle()
      this.$forceUpdate()
    },
    // 完成待办
    completeTodo(item, page) {
      console.log(item.id)
      this.putRequest('/todo/done/' + item.id).then(resp => {
        console.log(resp)
        if (resp) {
          console.log(resp.msg)
          if (page === 1) this.getMytodo()
          else if (page === 2) this.getMyCreate()
          else if (page === 3) this.getmyparticipants()
          else if (page === 4) this.getMyhandle()
          else this.getMyrecycle()
          this.$forceUpdate()
        }
      }, error => console.log(error))
    },
    // 删除待办进回收站 或 彻底删除
    deleteTodo(item, page) {
      this.$confirm(`请确定是否删除${item.name}待办`, '提示', {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteRequest(`/todo/logic/${item.id}`).then(resp => {
          if (resp) {
            console.log(resp.msg)
            if (page === 1) this.getMytodo()
            else if (page === 2) this.getMyCreate()
            else if (page === 3) this.getmyparticipants()
            else if (page === 4) this.getMyhandle()
            else this.getMyrecycle()
            this.$forceUpdate()
          }
        }, error => console.log(error))
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    // 批量删除列表
    delList(item) {
      if (item.delstatus === true) {
        this.dellist.push(item)
        var len = this.dellist.length
        if (!len) this.delmany = false
        else this.delmany = true
      }
    },
    // 批量删除进回收站
    delMany(page) {
      for (var i = 0; i < this.dellist.length; i++) {
        for (var j = 0; j < this.todoList.length; j++) {
          if (this.dellist[i] === this.todoList[j]) {
            this.todoList.splice(j, 1)
            this.recycleList.push(this.dellist[i]) // 回收列表
            break
          }
        }
      }
    },
    // 参与者数组
    getArray(item) {
      var list = []
      item.forEach(ele => {
        list.push(ele.name)
      })
      var participants = ''
      for (var i = 0; i < list.length; i++) {
        if (i !== list.length - 1) {
          participants += list[i] + ','
        } else {
          participants += list[i]
        }
      }
      return participants
    },
    // 转换 后端 => 前端
    ConverseItem(item) {
      return {
        id: item.tid,
        title: item.title,
        start: item.startTime.substring(0, 16),
        end: item.endTime.substring(0, 16),
        content: item.content,
        creator: item.eName,
        participants: item.participants,
        completeStatus: item.done,
        delstatus: item.deleted
      }
    },
    // 我的待办
    getMytodo() {
      this.todoPage = 1
      this.todoList.splice(0, this.todoList.length)
      var mytodolist = []
      // 我发起的
      this.getRequest('/todo/set').then((resp) => {
        if (resp) {
          resp.data.expiredTodoList.forEach(item => {
            // if (!item.done && !item.deleted) this.todoList.push(this.ConverseItem(item))
            if (!item.done && !item.deleted) mytodolist.push(this.ConverseItem(item))
          })
          resp.data.unexpiredTodoList.forEach(item => {
            // if (!item.done && !item.deleted) this.todoList.push(this.ConverseItem(item))
            if (!item.done && !item.deleted) mytodolist.push(this.ConverseItem(item))
          })
        } else {
          console.log('未拿到我发起的数据')
        }
      })
      // 我参与的
      this.getRequest('/todo/participate').then(resp => {
        if (resp) {
          resp.data.expiredTodoList.forEach(item => {
            // if (!item.done && !item.deleted) this.todoList.push(this.ConverseItem(item))
            if (!item.done && !item.deleted) mytodolist.push(this.ConverseItem(item))
          })
          resp.data.unexpiredTodoList.forEach(item => {
            // if (!item.done && !item.deleted) this.todoList.push(this.ConverseItem(item))
            if (!item.done && !item.deleted) mytodolist.push(this.ConverseItem(item))
          }, error => console.log(error))
        } else {
          console.log('未拿到我参与的数据')
        }
      })
      this.todoList = mytodolist
      // console.log('我的待办', mytodolist)
      // console.log('this.todoList', this.todoList)
    },
    // 我发起的
    getMyCreate() {
      this.todoPage = 2
      this.MyTodoList = []
      var mytodolist = []
      this.getRequest('/todo/set').then((resp) => {
        if (resp) {
          resp.data.expiredTodoList.forEach(item => {
            // if (!item.done && !item.deleted) this.MyTodoList.push(JSON.parse(JSON.stringify(this.ConverseItem(item))))
            if (!item.done && !item.deleted) mytodolist.push(this.ConverseItem(item))
          })
          resp.data.unexpiredTodoList.forEach(item => {
            // if (!item.done && !item.deleted) this.MyTodoList.push(this.ConverseItem(item))
            if (!item.done && !item.deleted) mytodolist.push(this.ConverseItem(item))
          })
        } else {
          console.log('未拿到我发起的数据')
        }
      })
      this.todoList = mytodolist
      console.log('TodoList', mytodolist)
    },
    // 我参与的
    getmyparticipants() {
      this.todoPage = 3
      var mytodolist = []
      this.getRequest('/todo/participate').then(resp => {
        if (resp) {
          resp.data.expiredTodoList.forEach(item => {
            // if (!item.done && !item.deleted) this.MyParticipateList.push(this.ConverseItem(item))
            if (!item.done && !item.deleted) mytodolist.push(this.ConverseItem(item))
          }, error => console.log(error))
          resp.data.unexpiredTodoList.forEach(item => {
            // if (!item.done && !item.deleted) this.MyParticipateList.push(this.ConverseItem(item))
            if (!item.done && !item.deleted) mytodolist.push(this.ConverseItem(item))
          }, error => console.log(error))
        } else {
          console.log('未拿到我参与的数据')
        }
      })
      this.todoList = mytodolist
      console.log('MyParticipateList', this.todoList)
    },
    // 已处理的
    getMyhandle() {
      this.todoPage = 4
      this.todoList.length = 0
      var mytodolist = []
      // var user = JSON.parse(window.sessionStorage.getItem('user'))
      // var name = user.name
      // TodoList.todoList.forEach(item => {
      //   if (item.completeStatus === true && (this.getArray(item.participants).indexOf(name) >= 0 || item.creator === name)) {
      //     this.todoList.push(item)
      //   }
      // })
      // this.todoList.forEach(item => {
      //   item.delstatus = false
      // })
      // 我发起的
      this.getRequest('/todo/set').then((resp) => {
        if (resp) {
          resp.data.expiredTodoList.forEach(item => {
            // if (item.done && !item.deleted) this.DoneList.push(this.ConverseItem(item))
            if (item.done && !item.deleted) mytodolist.push(this.ConverseItem(item))
          })
          resp.data.unexpiredTodoList.forEach(item => {
            // if (item.done && !item.deleted) this.DoneList.push(this.ConverseItem(item))
            if (item.done && !item.deleted) mytodolist.push(this.ConverseItem(item))
          })
        } else {
          console.log('未拿到已完成的数据')
        }
      })
      // 我参与的
      this.getRequest('/todo/participate').then(resp => {
        if (resp) {
          resp.data.expiredTodoList.forEach(item => {
            // if (item.done && !item.deleted) this.DoneList.push(this.ConverseItem(item))
            if (item.done && !item.deleted) mytodolist.push(this.ConverseItem(item))
          })
          resp.data.unexpiredTodoList.forEach(item => {
            // if (item.done && !item.deleted) this.DoneList.push(this.ConverseItem(item))
            if (item.done && !item.deleted) mytodolist.push(this.ConverseItem(item))
          }, error => console.log(error))
        } else {
          console.log('未拿到我参与的数据')
        }
      })
      this.todoList = mytodolist
      console.log('已完成的：', mytodolist)
    },
    // 回收站
    getMyrecycle() {
      this.todoPage = 5
      var mytodolist = []
      // 我发起的
      this.getRequest('/todo/set').then((resp) => {
        if (resp) {
          resp.data.expiredTodoList.forEach(item => {
            console.log('item', item)
            // if (item.deleted) this.deleteList.push(this.ConverseItem(item))
            if (item.deleted) mytodolist.push(this.ConverseItem(item))
          })
          resp.data.unexpiredTodoList.forEach(item => {
            // if (item.deleted) this.deleteList.push(this.ConverseItem(item))
            if (item.deleted) mytodolist.push(this.ConverseItem(item))
          })
        } else {
          console.log('未拿到我发起的数据')
        }
      })
      // 我参与的
      this.getRequest('/todo/participate').then(resp => {
        if (resp) {
          resp.data.expiredTodoList.forEach(item => {
            // if (item.deleted) this.deleteList.push(this.ConverseItem(item))
            if (item.deleted) mytodolist.push(this.ConverseItem(item))
          })
          resp.data.unexpiredTodoList.forEach(item => {
            // if (item.deleted) this.deleteList.push(this.ConverseItem(item))
            if (item.deleted) mytodolist.push(this.ConverseItem(item))
          }, error => console.log(error))
        } else {
          console.log('未拿到我参与的数据')
        }
      })
      this.todoList = mytodolist
      console.log('this.todoList', this.todoList)
      this.$forceUpdate()
    },
    // 删除回收站
    delrecycle(id) {
      this.$confirm('请确定是否删除此待办', '提示', {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteRequest(`/todo/${id}`).then(resp => {
          if (resp) {
            console.log(resp.msg)
            this.getMyrecycle()
            // this.$forceUpdate()
          }
        }, error => console.log(error))
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    }
  }
}
</script>

<style scoped>
/** 待办事项 */
.todocontent {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  padding-top: 1vh;
}
/*======================================== 左边区域  start ========================================= */
/** 日历背景颜色 */
.Gray {
  color: #C0C4CC;
}
.left{
  width: 21%;
  height: 100%;
  box-sizing: border-box;
  border-right: 1px solid #EBEEF5;
  padding-left: 10px;
}
.left > .left-top {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
}
.left > .left-top  /deep/ .el-input__inner {
  font: 1vw '宋体'!important;
}
/**============================ 日历 样式  start ========================*/
.left > #calendar{
  width: 96%;
}
/** 三个按钮 */
.left /deep/ .el-button-group>.el-button:first-child {
  width: 2vw;
}
.left /deep/ .el-button-group>.el-button:last-child {
  width: 2vw;
}
.left /deep/ .el-button-group>.el-button:not(last-child):not(first-child) {
  width: 4vw;
}
/** 单个表格 */
.left /deep/ .el-calendar-table .el-calendar-day {
  box-sizing: border-box;
  height: 3vh !important;
  padding: 0px;
  text-align: center;
}
.left /deep/ .el-calendar__body {
  padding-bottom: 20px;
}
/**============================ 日历 样式  end ========================*/
/** 待办按钮 */
.left .left-bottom {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  width: 100%;
  height: 24vh;
}
.left .left-bottom > .el-button {
  width: 100%;
  margin-bottom: 1vh;
  border: none;
  margin-left: 0px;
  text-align: left;
  padding-left: 1vw;
}
/*======================================== 左边区域  end ========================================= */

/*======================================== 右边区域  start ========================================= */
.right {
  width: 79%;
  height: 87vh;
  overflow: hidden;
  /* background-color: darkorchid; */
}
.right > .right-top {
  /* background-color: darkslategray; */
  width: 100%;
  height: 10vh;
}
/** 标题 */
.right > .right-top > #title {
  width: 100%;
  height: 4vh;
  font: 2vw '宋体';
  text-align: center;
  margin: 0px;
  /* background-color: deepskyblue; */
}
.right > .right-top > .el-button {
  position: relative;
  left: 63vw;
  /* background-color: firebrick; */
}
/** 卡片外的大盒子 */
.right > .right-bottom {
  width: 102%;
  height: 81%;
  box-sizing: border-box;
  overflow-y: auto;
  padding-left: 2vw;
}
/** 卡片 */
.card {
  width: 92%;
  height: 13vh;
  box-sizing: border-box; /** 盒子不被撑开 */
  margin: 0px;
  margin-top: 2vh;
  /* background-color: cornflowerblue; */
}
.card:hover {
  cursor: pointer;
}
.card:hover .cardDivbtn {
  width: 15%;
}
.card:hover .cardDivright-text {
  width: 70%;
}
.cardDivleft {
  display: inline-block;
  width: 50%;
  /* margin: 1vh 0 0 1vw;  * 上 右 下 左 */
  padding: 1vh 0 0 1vw;
  /* background-color: darkcyan; */
}
.cardDivleft > .checkbox {
  position: relative;
  top: -5vh;
  display: inline-block;
  margin-right: 1vw;
  /* background-color: yellow; */
}
.cardDivleft > .text {
  display: inline-block;
  width: 90%;
  /* background-color: indigo; */
}
.cardDivleft > .text .cardTitle{
  display: inline-block;
  /* font: 1.5vw '宋体'; */
  font-family: '华文中宋';
  font-size: 20px;
  font-weight: bolder;
  margin-top: 0.5vh;
}
.cardDivleft > .text  #remark {
  display: inline-block;
  width: 10vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cardDivright {
  display: inline-block;
  text-align: right;
  width: 50%;
  /* background-color: goldenrod; */
}
.cardDivright > .cardDivright-text {
  display: inline-block;
  width: 100%;
  height: 100%;
  /* background-color: indianred; */
}
.cardDivright > .cardDivbtn {
  display: inline-block;
  box-sizing: border-box;
  text-align: right;
}
.cardDivright > .cardDivbtn .el-link {
  position: relative;
  margin-right: 1vw;
  font-size: 2vw;
}
.cardDivright > .cardDivright-text .endfontnormal{
  display: inline-block;
  font-family: '华文中宋';
  font-size: 20px;
  font-weight: bolder;
  color: #DEE1E6;
  margin-top: 2vh;
  margin-right: 2vw;
}
.cardDivright > .cardDivright-text .endfontred {
  display: inline-block;
  font-family: '华文中宋';
  font-size: 20px;
  font-weight: bolder;
  color: red;
  margin-top: 2vh;
  margin-right: 2vw;
}
.cardDivright > .cardDivright-text .endtimenormal {
  display: inline-block;
  margin-right: 1vw;
  font-size: 18px;
  color: #DEE1E6;
}
.cardDivright > .cardDivright-text .endtimered {
  display: inline-block;
  margin-right: 1vw;
  font-size: 18px;
  color: red;
}
.cardDivright > .cardDivright-text > .endtext {
  display: inline-block;
  margin-right: 3vw;
  color: red;
  font-weight: bold;
}
/*======================================== 右边区域  end ========================================= */
</style>
